<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <Loading v-if="loading"></Loading>
  <view v-else class="overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <wd-toast />
    <view class="bg-white flex justify-start items-center px-4 mb-2">
      <view class="flex-1/12">
        <wd-button type="icon" icon="github" @click="onClick()"></wd-button>
      </view>
      <view class="flex-8/12">
        <wd-search
          custom-class="search-box"
          v-model="searchInput"
          @search="onSearch(searchInput)"
          hide-cancel
          maxlength="200px"
        />
      </view>
      <view class="flex-4/12"></view>
    </view>
    <wd-gap bg-color="#f3f4f6"></wd-gap>
    <view class="bg-gray-100 px-4">
      <view>
        <wd-swiper :list="swiperList" autoplay :indicator="{ type: 'dots-bar' }"></wd-swiper>
      </view>
      <wd-gap bg-color="#f3f4f6"></wd-gap>
      <view v-for="route in data.records">
        <CardComp :route="route" :key="route.id" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Loading from '@/components/loading/loading.vue'
import useRequest from '@/hooks/useRequest'
import { getRouteAPI, Response } from '@/service/route/route'
import { useToast } from 'wot-design-uni'
import CardComp from './components/card.vue'

defineOptions({
  name: 'Home',
})
const swiperList = ref([
  'https://i.postimg.cc/SXys2Ngr/bicycle-8211559-1280.jpg',
  'https://i.postimg.cc/TyCPrMSX/cycling-4397606-1280.jpg',
  'https://i.postimg.cc/dk3V6NPZ/mountain-bike-4297972-1280.jpg',
  'https://i.postimg.cc/rDGswtNs/snow-3066167-1280.jpg',
])

const {
  loading: loading,
  error: err,
  data: data,
} = useRequest<Response>(() => getRouteAPI(), { immediate: true })

const searchInput = ref<string>('')
const onSearch = (search: string) => {
  uni.navigateTo({
    url: `/pages-sub/search/search?keywords=${search}`,
  })
}

const toast = useToast()
const onClick = () => {
  uni.request({
    url: 'https://v.api.aa1.cn/api/api-tianqi-3/index.php?msg=四川&type=1',
    method: 'GET',
    success: (res) => {
      toast.show(
        `今天是${res.data.data[0].riqi}，天气${res.data.data[0].tianqi}，气温${res.data.data[0].wendu}度，${res.data.data[0].fengdu}，空气质量${res.data.data[0].pm}。`,
      )
    },
  })
}
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<style>
.main-title-color {
  color: #d14328;
}
.search-box {
  display: flex;
  height: 100%;
  align-items: center;
  --wot-search-padding: 0;
  --wot-search-side-padding: 0;
}

:deep(.search-box) {
  padding: 0 !important;
}
</style>
